<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" href="images/favicon.ico" />
<style type="text/css">
body{ margin:0;padding:0;text-align:center;background:#F2FFED; }
.container{ width:960px;height:auto;margin:20px auto;padding:10px;border:1px solid #EAEAEA;background:#ffffff;text-align:left; }
.box{ border:1px solid #dedede;margin:10px; }
.dataTable {border-collapse:collapse; width:550px; border:1px solid #4d9ab0;margin:5px;}
.dataTable td {border:1px solid #4d9ab0;word-break: break-all;}
</style>
<script type="text/javascript" src="../static/js/lib/jquery/1.11.1/jquery.min.js"></script>

<!-- jquery.gritter start -->
<link rel="stylesheet"  type="text/css" href="../static/js/lib/gritter/1.7.4/css/jquery.gritter.css"/>
<!-- <link rel="stylesheet"  type="text/css" href="../static/js/lib/gritter/1.7.4/css/theme.css"/> -->
<script type="text/javascript" src="../static/js/lib/gritter/1.7.4/js/jquery.gritter.min.js"></script>
<!-- jquery.gritter end   -->
<script type="text/javascript">
$(function(){
});

function foo(){
	$.gritter.add({
		// (string | mandatory) the heading of the notification
		title: 'This is a notice!',
		// (string | mandatory) the text inside the notification
		text: 'This will fade out after a certain amount of time.'
	});
}


function bar(){
	$.gritter.add({
		// (string | mandatory) the heading of the notification
		title: 'This is a regular notice!',
		// (string | mandatory) the text inside the notification
		text: 'This will fade out after a certain amount of time.',
		// (string | optional) the image to display on the left
		image: '../static/images/codemonkey.jpg',
		// (bool | optional) if you want it to fade out on its own or just sit there
		sticky: false, 
		// (int | optional) the time you want it to be alive for before fading out (milliseconds)
		time: 8000,
		// (string | optional) the class name you want to apply directly to the notification for custom styling
		class_name: 'my-class',
	        // (function | optional) function called before it opens
		before_open: function(){
			alert('I am a sticky called before it opens');
		},
		// (function | optional) function called after it opens
		after_open: function(e){
			alert("I am a sticky called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);
		},
		// (function | optional) function called before it closes
		before_close: function(e, manual_close){
	                // the manual_close param determined if they closed it by clicking the "x"
			alert("I am a sticky called before it closes: I am passed the jQuery object for the Gritter element... \n" + e);
		},
		// (function | optional) function called after it closes
		after_close: function(){
			alert('I am a sticky called after it closes');
		}
	});
}

var foobarGritter;
function foobar(){
	foobarGritter = $.gritter.add({
		title: 'yo!滑板鞋',
		text: '似魔鬼的步伐，摩擦，摩擦~~.',
		sticky: true
	});
}
function closeFoobar(){
	$.gritter.remove(foobarGritter, { 
		fade: true, 
		speed: 'fast' 
	});
}
function closeAll(){
	$.gritter.removeAll();
}


/**
globel setting
$.extend($.gritter.options, { 
    position: 'bottom-left', // defaults to 'top-right' but can be 'bottom-left', 'bottom-right', 'top-left', 'top-right' (added in 1.7.1)
 	fade_in_speed: 'medium', // how fast notifications fade in (string or int)
 	fade_out_speed: 2000, // how fast the notices fade out
 	time: 6000 // hang on the screen for...
 });
 */
</script>
</head>
<body>
<div class="container">
	<div class="box">
		<button onclick="foo()">demo1</button>
	</div>
	<div class="box">
		<button onclick="bar()">demo2</button>
	</div>
	<div class="box">
		<button onclick="foobar()">demo3</button>
		<button onclick="closeFoobar()">关啊</button>
		<button onclick="closeAll()">remove All</button>
	</div>
</div>
</body>
</html>